<template>
  <div>
    <div style="float:left;"><P>参数测试</P></div>
    <div style="float: left">
      <div ref="left" class="myLeftDiv">右边</div>
      <div ref="mid" class="myMidDiv">
        中间
      </div>
      <div ref="right" class="myRightDiv">aaa</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyLayout',
  data () {
    return {
      myHeight: ''
    }
  },
  mounted () {
    this.myHeight = this.$refs.mid.clientHeight
    this.$refs.left.style.height = this.myHeight + 'px'
    this.$refs.right.style.height = this.myHeight + 'px'
  }
}
</script>

<style scoped>
.myLeftDiv {
  float: left;
  background-color: #409EFF;
  height: 100%;
  width: 20%;
}

.myRightDiv {
  float: right;
  background-color: #409EFF;
  height: 100%;
  width: 25%;
}

.myMidDiv {
  float: left;
  background-color: red;
  height: 300px;
  width: 50%;
}
</style>
